Introducing the Grid Builder

Description

In addition to UX components, grid components are an important part of Alpha Anywhere Web Publishing. They retrieve and display data from a variety of types of databases. They allow the user to search for, edit, insert, and delete records. You create grid components with the Grid Builder.

Name
Description
Finding the Grid Builder

Steps for locating the Grid Builder in Alpha Anywhere:

Grid Templates

Whenever you create a new grid component in Alpha Anywhere, the Grid Templates Genie pops up, which lets you select one of several pre-defined templates or a template from your own library of templates.Templates can be a great time saver because you can pre-set a multitude of properties whenever you create a new component. This [video] demonstrates how you can use existing templates, and how you can define your own templates.

Toolbar Functions

The Grid Builder contains the following tools on it's toolbar.

Page Menu

The page menu allows you to select different sets of menus.

Component Type Page

The Component Type page defines the major characteristics of a grid. You can easily access this page by clicking the Component Type icon at the top of the Component Type tree menu on the left.

Live Preview Pane

The Live Preview pane renders the grid using an embedded version of Google Chrome. It provides a quick look at your work and a way to check its behavior with live data.

Grid Data Source Menu

The Grid > Data Source Menu provides two options that select the type of database connection that will be used: .dbf Tables or an SQL database accessed via AlphaDAO (Alpha Data Access Object). Selecting one or the other will show either the Grid > Query (DBF) or Grid > Query (AlphaDAO) settings.

Grid Fields Pane

The Grid Fields pane shows the fields that have been returned by your table or view selection or SQL query. You move these fields from the Available Fields list to the Selected Fields list to display them on the grid. See also Selecting the Fields to Display.

Grid Properties Menu

The Grid > Properties Menudefines the formatting for the grid, including the style sheet, and enables some special features. For more information, see Setting Grid Properties. When you click on any given property, a detailed description of that property will be displayed below the Grid Properties menu.

Grid Update Settings Menu

The Grid > Update Settingsmenu only appears if the grid is updateable. This is where you control user delete, update, and insert operations. There are quite a number of security permissions that can be set in the update menu. These will allow certain users to edit, add, and delete records while restricting the ability of other users to do so. See the Setting Update Properties page as well as the Controlling Record Updatepage for more information about Update Settings.

Search Fields and Detail View, Fields Menus

The Search > Fieldsand Detail View > Fields menus are similar to the Grid > Fields menus in function. The page for manipulating fields in Search and Detail are almost identical in their properties list and selection of tools.

Search, Properties and Detail View, Properties Menus

Like Search and Detail View fields, Search > Properties and Detail View > Properties menus are also similar to the Grid > Propertiesmenus in function. You can use them to create the look and feel of the Search and Detail View boxes in your grid.

Code

The Code section allows you to add Server-side and Client-side Event handlers, custom Xbasic Functions, and Javascript Functions to your grid. You can adapt your code to examine the contents of a grid, properties of a grid, and the data being submitted. You can then take action to modify values or even cancel the submission.

Information

The Information menu allows you to add information about the grid. It also tracks the time of the grid's creation and last update. It is located at the very bottom of the Component Type tree menu in the Grid Builder.

Xbasic Pane

The Xbasicpane shows you the Xbasic code that the builder is creating in the background. You cannot edit this code, but you can copy it.

Working Preview Pane

The Working Preview is like the Live Preview in that it shows an actual working version of your grid.

Grid Builder Tutorials

Short tutorials for adding functionality to a Grid Component.